import React, {Component} from 'react';
import style from './button.less'

class FakeButton extends Component {
  static defaultProps = {
    loading: false,
    color: "",
    size: "normal",
    icon: "",
    round: false,
    iconPosition: 'left'
  }

  render() {
    const {size, color, icon, loading, round, iconPosition,className} = this.props
    let classList = [style.fakeButton]
    let styleObject = {}
    let events = {}
    if(className){
      classList.push(className)
    }
    if (size === "big") {
      classList.push(style.big)
    }
    if (size === "small") {
      classList.push(style.small)
    }
    if (color === "warn") {
      classList.push(style.warn)
    } else if (color === "danger") {
      classList.push(style.danger)
    } else if (color === "main") {

    } else {
      styleObject.backgroundColor = color
    }
    if (loading) {
      classList.push(style.loading)
    }
    if (round) {
      classList.push(style.round)
    }
    if (iconPosition === "right") {
      classList.push(style.iconRight)
    }
    for (let key in this.props){
      if(!Object.keys(FakeButton.defaultProps).includes(key)){
        events[key] = this.props[key]
      }
    }
    return <button className={classList.join(' ')} style={styleObject} {...events} >{icon ? (
      <i className={`iconfont icon-${icon}`}></i>) : ""}{this.props.children}{loading ? (
      <i className={`iconfont icon-loading`}></i>) : ""}</button>
  }
}


export default FakeButton